<template name="autoTranslateFlexTab">
	<div class="content">
		{{#requiresPermission 'auto-translate'}}
			<div class="list-view autotranslate">
				<div class="title">
					<h2>{{_ "Auto_Translate"}}</h2>
				</div>
				<form>
					<ul class="list clearfix">
						<li>
							<label>{{_ "Automatic_Translation"}}</label>
							<div>
								<div class="input checkbox toggle">
									<input type="checkbox" id="autoTranslate" name="autoTranslate" value="1" checked="{{$eq autoTranslate true}}" />
									<label for="autoTranslate"></label>
								</div>
							</div>
						</li>
						<li>
							<label>{{_ "Language"}}</label>
							<div>
								{{#if editing 'autoTranslateLanguage'}}
									<label>
										<select name="autoTranslateLanguage">
											{{#each supportedLanguages}}
												<option value="{{language}}" selected={{$eq language autoTranslateLanguage}}>{{$or name language}}</option>
											{{/each}}
										</select>
									</label>
									<div class="alert">
										{{_ "AutoTranslate_Change_Language_Description"}}
									</div>
									<button type="button" class="rc-button rc-button--cancel">{{_ "Cancel"}}</button>
									<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
								{{else}}
									<span class="current-setting">{{languageName autoTranslateLanguage}} <i class="icon-pencil" data-edit="autoTranslateLanguage"></i></span>
								{{/if}}
							</div>
						</li>
					</ul>
				</form>
			</div>
		{{/requiresPermission}}
	</div>
</template>
